<template>
    <div
        class="video-box"
        :class="{
            'is-fullscreen': isFullScreen,
        }"
        @click="onVideoPlayOrPause"
    >
        <!-- 小米浏览器处理 -- 点击弹出播放 -->
        <img
            class="poster-image"
            :src="
                data.mp4_video_generation_url +
                '?x-oss-process=video/snapshot,t_0,f_jpg,w_480,h_0,m_fast,ar_auto'
            "
            :style="{
                height: (281 / innerHeight) * 100 + 'vh',
            }"
            @click="onDialogPlay"
            v-if="pageStore.isVideoError"
        />

        <video
            v-else
            width="100%"
            :style="{
                height: (281 / innerHeight) * 100 + 'vh',
            }"
            :src="data.mp4_video_generation_url"
            :title="data.name"
            webkit-playsinline="true"
            playsinline="true"
            x5-playsinline="true"
            t7-video-player-type="inline"
            x5-video-player-type="h5-page"
            x-webkit-airplay="allow"
            controlslist="nodownload"
            muted
            loop
            preload="metadata"
            ref="videoRef"
            :controls="isFullScreen"
            @pause="onPause"
            @play="onPlay"
            @canplay="onCanplay"
            @waiting="onWaiting"
            @loadedmetadata="onLoadedmetadata"
            @playing="onPlaying"
            @volumechange="onVolumechange"
            :poster="
                data.mp4_video_generation_url +
                '?x-oss-process=video/snapshot,t_0,f_jpg,w_480,h_0,m_fast,ar_auto'
            "
        ></video>

        <template v-if="pageStore.isVideoError">
            <img
                class="play-icon"
                :src="`${_oss_}images/mobile/icon-play.png`"
                @click="onDialogPlay"
            />
        </template>

        <template v-else>
            <!-- <var-icon
                class="full-screen-back"
                name="chevron-left"
                v-if="isFullScreen"
            /> -->

            <div class="loading">
                <var-loading type="circle" color="#5185fb" v-if="loading" />
            </div>

            <div class="watermark"></div>

            <!-- 声音开关 -->
            <!-- <img
                class="icon-mute"
                :src="`${_oss_}images/icon-mute.svg`"
                v-if="muted"
                @click.stop="setAudioMutedState()"
            />
            <img
                class="icon-volume"
                :src="`${_oss_}images/icon-volume.svg`"
                v-else
                @click.stop="setAudioMutedState()"
            /> -->

            <!-- 播放按钮 -->
            <img
                class="play-icon"
                :src="`${_oss_}images/mobile/icon-play.png`"
                v-if="isPaused"
                @click="onVideoPlayOrPause"
            />

            <!-- 全屏显示 -->
            <div class="full-screen-btn" @click.stop="onVideoFullscreen">
                <img
                    class="full-screen-icon"
                    :src="`${_oss_}images/mobile/icon-full-screen.png`"
                />
                <div class="text">全屏显示</div>
            </div>
        </template>
    </div>

    <LazyDialogVideoPlayM
        v-if="pageStore.isVideoError"
        ref="videoRef"
        :src="data.mp4_video_generation_url"
    />
</template>
<script setup>
const pageStore = usePageStore();
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
    muted: {
        type: Boolean,
        default: true,
    },
});

const loading = ref(true);
const isFullScreen = ref(false);
const videoRef = ref();
const isPaused = ref(true);
const innerHeight = ref(0);

if (process.client) {
    innerHeight.value = window.innerHeight;
}

const emits = defineEmits(["play", "pause"]);

const onVideoPlayOrPause = () => {
    if (isPaused.value) {
        videoRef.value.play();
    } else {
        videoRef.value.pause();
    }
};

const onPlay = () => {
    if (!props.muted) {
        videoRef.value.muted = false;
    }
    isPaused.value = false;
};

const onPause = () => {
    isPaused.value = true;
};

// 处理全屏状态点击音量问题
const onVolumechange = () => {
    if (
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
    ) {
        emits("update:muted", videoRef.value.muted);
    }
};

const onWaiting = (e) => {
    loading.value = true;
};

const onCanplay = () => {
    loading.value = false;
};

const onPlaying = () => {
    loading.value = false;
};

const onLoadedmetadata = (e) => {};

const setAudioMutedState = () => {
    videoRef.value.muted = !props.muted;
    emits("update:muted", !props.muted);
};

const onVideoFullscreen = () => {
    //W3C
    if (videoRef.value.requestFullscreen) {
        videoRef.value.requestFullscreen();
    }
    //FireFox
    else if (videoRef.value.mozRequestFullScreen) {
        videoRef.value.mozRequestFullScreen();
    }
    //IE11
    else if (videoRef.value.msRequestFullscreen) {
        videoRef.value.msRequestFullscreen();
    }
    //Chrome
    else if (videoRef.value.webkitRequestFullscreen) {
        videoRef.value.webkitRequestFullscreen();
    }
    // IOS（特例）
    else if (videoRef.value.webkitEnterFullscreen) {
        videoRef.value.webkitEnterFullscreen();
    } else {
        Message().warning("当前浏览器不支持全屏功能！");
    }
};

watch(
    () => props.muted,
    () => {
        videoRef.value.muted = props.muted;
    }
);

defineExpose({
    play: async () => {
        await nextTick();
        videoRef.value.play().catch((error) => {
            console.log("error: " + error);
        });
    },
    pause: () => {
        videoRef.value.pause();
    },
});

const onDialogPlay = () => {
    videoRef.value.show();
};

const handleFullScreenChange = () => {
    if (
        document.fullscreenElement === videoRef.value ||
        document.webkitFullscreenElement === videoRef.value ||
        document.mozFullScreenElement === videoRef.value ||
        document.msFullscreenElement === videoRef.value
    ) {
        console.log("Video entered fullscreen");
        isFullScreen.value = true;
    } else {
        console.log("Video exited fullscreen");
        isFullScreen.value = false;
    }
};

onMounted(() => {
    document.addEventListener("fullscreenchange", handleFullScreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
    document.addEventListener("mozfullscreenchange", handleFullScreenChange);
    document.addEventListener("MSFullscreenChange", handleFullScreenChange);
});

onBeforeUnmount(() => {
    document.removeEventListener("fullscreenchange", handleFullScreenChange);
    document.removeEventListener(
        "webkitfullscreenchange",
        handleFullScreenChange
    );
    document.removeEventListener("mozfullscreenchange", handleFullScreenChange);
    document.removeEventListener("MSFullscreenChange", handleFullScreenChange);
    // 销魂视频
    if (!pageStore.isVideoError) {
        videoRef.value.removeAttribute("src");
        videoRef.value.load();
    }
});
</script>
<style lang="scss" scoped>
.video-box {
    &:not(.is-fullscreen) {
        video {
            object-fit: cover;
            &::-webkit-media-controls {
                display: none;
            }
        }
    }

    .watermark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/watermark.png");
        background-size: 100% 100%;
    }

    .icon-mute,
    .icon-volume {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        bottom: 5px;
        display: block;
    }

    .poster-image {
        width: 100%;
        // height: 38vh;
        display: block;
    }

    video {
        width: 100%;
        // height: 38vh;
        // object-fit: cover;
        display: block;

        // &::-webkit-media-controls {
        //     display: none;
        // }
    }

    .full-screen-btn {
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 73px;
        height: 22px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 11px;
        border: 1px solid #fff;
        opacity: 0.5;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);

        .full-screen-icon {
            width: 11px;
            height: 10px;
            margin-right: 3px;
        }

        .text {
            width: 40px;
            font-size: 20px;
            transform: scale(0.5);
            white-space: nowrap;
            transform-origin: left center;
            color: #fff;
        }
    }

    .play-icon {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
